<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        * {
            padding: 0;
            margin: 0
        }
        
        ul {
            list-style: none;
            width: 504px;
            height: 40px;
            line-height: 40px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }
        
        li {
            float: left;
            width: 100px;
            border-right: 1px dashed #ccc;
            height: 40px;
        }
        
        a {
            display: block;
            width: 69px;
            height: 40px;
            text-decoration: none;
            color: #909090;
            font-size: 14px;
            background: url(images/360bg.png) no-repeat;
            padding-left: 30px;
            transition: all .5s linear 0s;
        }
        
        .novel {
            border-right: none;
        }
        
        a:hover {
            color: #3faf0f;
        }
        
        .home a {
            background-position: 5px -55px
        }
        
        .news a {
            background-position: 5px -131px
        }
        
        .tv a {
            background-position: 5px -295px
        }
        
        .movie a {
            background-position: 5px -213px
        }
        
        .novel a {
            background-position: 5px -375px
        }
        
        .home a:hover {
            background-position: 5px -93px
        }
        
        .news a:hover {
            background-position: 5px -172px
        }
        
        .tv a:hover {
            background-position: 5px -335px
        }
        
        .movie a:hover {
            background-position: 5px -254px
        }
        
        .novel a:hover {
            background-position: 5px -415px
        }
    </style>
</head>

<body>
    <ul>
        <li class="home"><a href="#">我的主页</a></li>
        <li class="news"><a href="#">新闻头条</a></li>
        <li class="tv"><a href="#">电视剧</a></li>
        <li class="movie"><a href="#">最新电影</a></li>
        <li class="novel"><a href="#">小说大全</a></li>
    </ul>
</body>

</html>